<template>
<div>
   	<Modal v-model="is_showing" width="95" :mask-closable="false" :styles="{top: '20px'}" @on-visible-change="handleCloseModal">
         <a slot="header" :href="'/#/index/specialservice_detail/'+abutment.plateformservice_id">{{abutment.plateformservice_title}}申领详情</a>
        <div v-if="!is_loading">
            <Card>
                <Row>
                    <Col span="12">
                        <p><strong>申请编号：</strong>{{abutment.number}}</p>
                    </Col>
                    <Col span="12">
                        <p><strong>申请状态：</strong>{{["删除", "正在申领", "申领成功", "申领失败"][abutment.status]}}</p>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <p><strong>平台服务编号：</strong>{{abutment.service_number}}</p>
                    </Col>
                    <Col span="12">
                        <p><strong>平台服务名称：</strong><a :href="'/#/index/specialservice_detail/'+abutment.plateformservice_id" target="_blank">{{abutment.title}}</a></p>
                    </Col>
                </Row>
            </Card>
            <Collapse value="1">
                <Panel name="1">
                    申领流程
                    <div slot="content">
                        <StepsEditor v-if="abutment.status==0" source-type="abutment" :source="abutment" mode="preview_default"></StepsEditor>
                        <StepsEditor v-if="abutment.status==1" source-type="abutment" :source="abutment" mode="demand"></StepsEditor>
                        <StepsEditor v-if="abutment.status==2" source-type="abutment" :source="abutment" mode="preview_all"></StepsEditor>
                    </div>
                </Panel>
            </Collapse>
            <Card>
                <p style="color:#888;padding:10px;text-indent:2em;">
                    <span v-if="statusMessage[1][0]=='1'">您希望申领当前服务，点击【申领】按钮。</span>
                    <span v-if="statusMessage[1][1]=='1'">您不希望继续申领当前的平台服务，点击【撤销申领】按钮</span>
                </p>
                <p style="text-align:center;">
                    <Button v-if="statusMessage[1][0]=='1'" type="primary" @click="handleApply()">申领</Button>
                    <Button v-if="statusMessage[1][1]=='1'" type="error" @click="handleCancelApply()">撤销申领</Button>
                    <span style="color:#888">当前状态：{{ statusMessage[0] }}</span>
                </p>
            </Card>
        </div>
        <div slot="footer">
            <Button type="ghost" @click="handleDetail()">刷新</Button>
            <Button type="ghost" @click="is_showing=false">关闭页面</Button>
        </div>
    </Modal>
</div>
</template>
<script>
import StepsEditor from "@/common/components/StepsEditor"
import PlateformServiceAbutment from "@/common/model/PlateformServiceAbutment"
export default {
    name: 'PlatformServiceAbutmentPage',
    props: {
        value: {
            type: Boolean
        },
        id: {
            type: Number
        }
    },
    components: {
        StepsEditor
    },
    data() {
        return {
            is_showing: false,
            abutment: new PlateformServiceAbutment(),
            is_loading: true,
            modal2: false,
            displayRate: false
        };
    },
    computed: {
        info() {
            return this.$store.state.user.info;
        },
        statusMessage() {
            var status = this.abutment.status;

            if(status == 0) return ["未申领", "10", 0, 0];
            else if(status == 1) return ["正在申领", "01", 0, 0];
            else if(status == 2) return ["申领成功", "00", 0, 0];
            else if(status == 3) return ["申领失败", "00", 0, 0];
            else return ["无效状态", "000", 0, 0];
        },
        abutmentProgressValue() {
            if(this.statusMessage[3]) return this.abutmentProgress.length - 1; 
            else return this.statusMessage[2];
        }
    },
    methods: {
        handleDetail(){
            this.is_showing = this.value;
            if(this.is_showing) {
                this.is_loading = true;
                this.api.post("plateformabutment/get", {id: this.id}, res => {
                    this.abutment = PlateformServiceAbutment.parse(res.data);
                    this.is_loading = false;
                });
            }
        },
        handleApply() {

        },
        handleCancelApply() {
            if(confirm("是否确定撤销申领？（不可恢复）")){
                this.api.post("plateformabutment/delete",{id: this.id}, res =>{
                    if(res.value == true)
                    {
                        this.is_showing = !res.value;
                        this.api.post("plateformabutment/get", {id: this.id}, res => {
                            this.abutment = PlateformServiceAbutment.parse(res.data);
                        });
                    }
                });
            }
        },
        handlePassApply() {

        },
        handleCloseModal(value) {
            if(!value) {
                this.$emit("input", value);
                this.$emit("on-close");
            }
        }
    },
    watch: {
        value: "handleDetail"
    }
}
</script>
<style>
</style>
